<template>
  <view class="container">
  <uni-card>
    <view>{{title}}</view>
    <view>用户名：{{userInfo.username}}</view>
    <uni-row>
      <uni-col :span="12">
        <router-link path="/pages/index/index" :query="{id:'testid'}"><button>返回首页</button></router-link>
      </uni-col>
      <uni-col :span="12"><button @click="gotoLogin">退出登录</button></uni-col>
    </uni-row>

  </uni-card>

  <uni-card>
    <view>用户信息组件</view>
    <MyProfile :age="30" :name="title"></MyProfile>
  </uni-card>
  </view>
</template>

<script setup lang="ts">
import RouterLink from '@gowiny/uni-router/dist/components/router-link/router-link.vue'
import MyProfile from '@/components/test/my-profile.vue'
import { Action,Provide, getOptionsByClass, State } from '@gowiny/vue-class'
import { MyPage } from '@/my/super'
import { ref } from 'vue'
const title = ref('用户信息')
function gotoIndex(){
  uni.navigateTo({
    url:'/pages/index/index'
  })
}
</script>

<script  lang="ts">
class UserProfilePage extends MyPage{
  @State("user.userInfo")
  readonly userInfo!:any
  @Action("user/logout")
  logout!:()=>any

  @Provide("testInject")
  testInject11111(){
    uni.showModal({
      content:'我是 UserProfilePage 提供的 testInject 方法'
    })
  }

  @Provide("provideValue1")
  provideValue133333:string="UserProfilePage provideValue1"


  async gotoLogin(){
    await this.logout()
    console.log('已退出登录，现在跳转到登录页面')
    this.$Router.push({
      name:'login'
    })
  }
}
/*
这里展示的是<script lang="ts"> 和 <script setup lang="ts"> 两个标签共用的情况。
最后导出的时候，需要使用 getOptionsByClass 函数转换
*/
export default getOptionsByClass(UserProfilePage)
</script>

<style>

</style>
